<template>
  <el-container class="pageBG">
    <el-container >
      <!--      <sidebar1></sidebar1>-->
      <el-header>
        <!--顶部菜单栏-->
        <el-menu :default-active="activeIndex" class="el-menu-top" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" style="margin-left: 420px">高级插件</el-menu-item>
          <el-menu-item index="2">在线商城</el-menu-item>
          <el-menu-item index="3">客户管理</el-menu-item>
          <el-menu-item index="4">系统设置</el-menu-item>
          <el-menu-item index="5">活动发布</el-menu-item>
        </el-menu>
      </el-header>

      <!--中间主卡片-->
      <el-main class="aboutMain">
        <el-row class="tac" :gutter="0" type="flex" justify="space-between">
          <!--侧边导航栏-->
          <el-col :span="4" class="leftNav">
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
              <el-menu-item index="1">
                <a href="/About" style="text-decoration:none; color: #599ef8">
                  <span slot="title">活动发布</span>
                </a>
              </el-menu-item>

              <el-menu-item index="2" style="color: #76777a">
<!--                <i class="el-icon-menu"></i>-->
                <span slot="title">活动管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>

          <el-col class="aboutContent" :span="18">
            <br>
            <!--进度条-->
            <el-steps :active="active" finish-status="success" style="text-align: left; margin-left: 80px">
              <el-step title="活动信息"></el-step>
              <el-step title="报名签到"></el-step>
              <el-step title="分享设置"></el-step>
              <el-step title="个性设置"></el-step>
            </el-steps>

            <br>
            <!--填写表单-->
            <el-form ref="form" :model="form" label-width="80px" style="text-align: left">

              <el-form-item :required="true">
<!--                <el-col :span="8">-->
<!--                  <el-input v-model="form.name"></el-input>-->
<!--                </el-col>-->
                <div>
                  活动名称
                  <span style="color: red">*</span>
                </div>
                <div>
                  <el-input v-model="form.name"></el-input>
                </div>
              </el-form-item>
<!--              <el-input v-model="form.name"></el-input>-->
<!--              <el-form-item>-->
<!--                <el-input v-model="form.name"></el-input>-->
<!--              </el-form-item>-->

<!--              <el-form-item prop="name">-->
<!--                <div slot="label" style="margin-left:10px;">名称</div>-->
<!--                <el-input v-model="form.name" placeholder="请输入名称"></el-input>-->
<!--              </el-form-item>-->

              <el-form-item>
                <div>
                  活动分类
                  <span style="color: red">*</span>
                  <a href="http://localhost:8080/settings" style="text-decoration: none; color: #86bbf4">设置</a>
                </div>
                <el-radio-group v-model="radio">
                  <el-radio :label="1">精彩活动</el-radio>
                  <el-radio :label="2">喳喳活动</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <div>
                  活动标签
                  <span style="color: red">*</span>
                </div>
                <el-tag :key="tag" v-for="tag in tags" closable :disable-transitions="false" @close="delTag(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-tag" v-if="inputVisible" v-model="inputValue" ref="saveTag" size="small" @keyup.enter.native="confirmTag" @blur="confirmTag"></el-input>
                <el-button v-else class="button-add-tag" size="small" @click="inputTag">+ New Tag</el-button>
              </el-form-item>

              <el-form-item>
                <div>
                  活动时间
                  <span style="color: red">*</span>
                </div>
                <el-col :span="4">
                  <el-date-picker class="select-date" type="date" placeholder="选择日期" v-model="form.startDate" style="width: 100%"></el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-time-select class="select-time" type="time" placeholder="选择时间" v-model="form.startTime" style="width: 100%"></el-time-select>
                </el-col>
<!--                <span class="line">——</span>-->
                <el-col class="line" :span="1">——</el-col>

                <el-col :span="4">
                  <el-date-picker class="select-date" type="date" placeholder="选择日期" v-model="form.endDate" style="width: 100%"></el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-time-select class="select-time" type="time" placeholder="选择时间" v-model="form.endTime" style="width: 100%"></el-time-select>
                </el-col>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit">发布</el-button>
                <el-button>取消</el-button>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </el-container>

</template>


<script>
  export default {
    name: "About",
    components: {
    },
    data: function () {
      return {
        radio: "2",
        active: 0,
        tags: ["咋咋", "撒发生的"],
        inputVisible: false,
        inputValue: "",
        form: {
          name: "",
          type: "1",
          startDate: "",
          startTime: "",
          endDate: "",
          endTime: "",
          release: false,
          resource: "",
          desc: ""
        }
      };
    },
    methods: {
      delTag(tag){ // 删除标签
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
      inputTag(){ // 输入新的标签名
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTag.$refs.input.focus();
        });
      },
      confirmTag(){ // 输入完成后确认
        var inputValue = this.inputValue;
        if (inputValue) {
          this.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      },
      next() { // 下一步
        if (this.active++ > 3)
          this.active = 0;
      },
      onSubmit() { // 提交活动信息页面
        this.next();
      }
    }
  }
</script>

<style>
  .el-menu-top {
    background-color: #f0f2f7;
    position: center;
    text-align: center;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
  }
  .pageBG {
    background-color: #eaecf0;
  }
  .el-menu--collapse .el-menu .el-submenu . el-menu-popup {
    /*min-width: 100px;*/
  }
  .aboutMain {
    max-width: 90%;
    margin-left: 90px;
    margin-top: 30px;
    /*position: center;*/
    background-color: #feffff;
  }
  .leftNav {
    background-color: #fcfcfc;
  }
  .aboutContent {
    /*margin-left: -100px;*/
    /*position: relative;*/
    /*padding-left: -100px;*/
    margin-right: 80px;
    background-color: #feffff;
  }

  .tac {
    /*width: 25%;*/
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-add-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }


  .select-date {
    margin-left: 10px;
  }

  .select-time {
    margin-left: 20px;
  }

  .line {
    margin-left: 45px;
    /*margin-bottom: 100px;*/
    background-color: #feffff;
  }
</style>